<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多功能轮播图</title>
	<style>
		*{padding:0;margin:0;}
		ul{list-style:none;}
		button{
			position:absolute;
			left:0;
			top:0;
			width:30px;
			height:60px;
			outline:none;
			border:0;
			cursor:pointer;
			font-size:28px;
		}
		img{
			position:absolute;
			left:0;
			top:0;
		}
		#btnl{
			left:30px;
			top:120px;

		}
		#btnr{
			left:430px;
			top:120px;
		}
		.dds{
			position:absolute;
			left:150px;
			top:260px;
			width:30px;
			height:30px;
			line-height:30px;
			text-align:center;
			border-radius:50%;
			color:#fff;
			cursor:pointer;
			background-color:#ff6700;
		}	

	</style>
</head>
<body>
	<div id="did" >
		<img src="./images/11.jpg" style="display:block;"  >
		<img src="./images/22.jpg" style="display:none;"  >
		<img src="./images/33.jpg" style="display:none;"  >
		<img src="./images/44.jpg" style="display:none;"  >
		<img src="./images/55.jpg" style="display:none;"  >
		<button id="btnl" onclick="func('-')" ><</button>
		<button id="btnr" onclick="func('+')" >></button>
		<div class="dds" onmouseover="fun(0)" style="background-color:green" >1</div>
		<div class="dds" onmouseover="fun(1)"  >2</div>
		<div class="dds" onmouseover="fun(2)"  >3</div>
		<div class="dds" onmouseover="fun(3)"  >4</div>
		<div class="dds" onmouseover="fun(4)"  >5</div>
	</div>
</body>
	<script>
		list1 = document.getElementsByTagName("img");
		list2 = document.getElementsByClassName("dds");
		did = document.getElementById("did");
		m=0;
		mytime=null;

		for(var i=0;i<list2.length;i++){
			list2[i].style.left = 130+i*40+"px";
		}

		function show(m){
			for(var i=0;i<list1.length;i++){
				if(i==m){
					list1[i].style.display="block";
					list2[i].style.backgroundColor="green";
				}else{
					list1[i].style.display="none";
					list2[i].style.backgroundColor="#ff6700";
				}
			}
		}

		function running(){
			m++;
			if(m==list1.length){
				m=0;
			}
			show(m);
		}
		mytime = setInterval(running,1000);

		did.onmouseover=function(){
			clearInterval(mytime);
			mytime=null;
		}

		function func(b){
			switch(b){
				case "-":
					m=m-2;
					if(m<-1){
						m=3;
					}
					break;
				case "+":
					m=m;
					break;
			}
			running();
		}

		function fun(s){
			for(var i=0;i<list1.length;i++){	
				if(i==s){
					list1[i].style.display="block";
					list2[i].style.backgroundColor="green";
				}else{
					list1[i].style.display="none";
					list2[i].style.backgroundColor="#ff6700";
				}
			}
		}

		did.onmouseout = function(){
			if(mytime==null){
				mytime = setInterval(running,1000);
			}
		}



	</script>
</html>